<!--
 * @Author: your name
 * @Date: 2022-03-02 13:34:55
 * @LastEditTime: 2022-05-09 14:13:09
 * @LastEditors: 血雪球 wash0226@outlook.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-data.vue
-->
<template>
  <el-card id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>生长数据 GROWTH DATA</span>
    </div>
    <el-row v-if="growthdatalist.length > 0">
      <div class="base-zh-title">生长环境数据</div>
      <el-col :span="6">
        <el-row class="left-top">
          <ul>
            <li v-for="(item, index) in growthdatalist" :key="index">
              <div>
                <img :src="item.url" height="50px" />
              </div>
              <span class="left-top-name">{{ item.name }}</span>
              <span>
                <b>{{ item.value }}</b>
                {{ item.unit }}
              </span>
            </li>
          </ul>
        </el-row>
      </el-col>
      <el-col class="right" :span="18">
        <div class="zh-right-echart">
          <div :scroll-x="true" class="zh-scroll-view">
            <div
              v-for="(enviritem, envirindex) in growthdatalist"
              :key="envirindex"
              class="box2-2"
              :class="{ 'box2-2-select': selectgrowthdataindex === envirindex }"
              @click="selectenvtype(envirindex)"
            >
              <span class="scroll-line">{{ enviritem.name }}</span>
            </div>
          </div>
          <zhecharts
            :isshowleg="false"
            :cdata="everchartdatalist"
            :nowwidth="'1200px'"
            :nowheight="'88%'"
            :font-size="16"
          />
        </div>
      </el-col>
    </el-row>
    <el-row v-if="farmworklist.length > 0">
      <div class="base-zh-title">农事作业数据</div>
      <div class="base-zh-frequency">累积作业次数：{{ frequencynum }} 次</div>
      <div class="zh-box-table agri">
        <el-table
          ref="tableData"
          v-loading="loading"
          highlight-current-row
          :data="farmworklist"
          stripe
          border
        >
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="agriculturalWorkTypeName" label="农事作业名称" />
          <el-table-column prop="agriculturalMaterialName" label="农资名称">
            <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
              <span
                v-if="scope.row.agriculturalMaterialName"
              >{{ scope.row.agriculturalMaterialName }}</span>
              <span v-if="!scope.row.agriculturalMaterialName">--</span>
            </template>
          </el-table-column>
          <el-table-column prop="assetQuantity" label="总投入量">
            <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
              <span v-if="scope.row.numberInputs">{{ scope.row.numberInputs }}</span>
              <span v-if="scope.row.numberInputs">{{ scope.row.unitName }}</span>
              <span v-if="!scope.row.numberInputs">--</span>
            </template>
          </el-table-column>
          <el-table-column prop="average" label="亩均用量">
            <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
              <span v-if="scope.row.average">{{ scope.row.average.toFixed(2) }}</span>
              <span
                v-if="scope.row.unitName && scope.row.areaUnit"
              >{{ scope.row.unitName }}/{{ scope.row.areaUnit }}</span>
              <span v-if="!scope.row.average">--</span>
            </template>
          </el-table-column>
          <el-table-column prop="frequency" label="次数">
            <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
              <span v-if="scope.row.frequency">{{ scope.row.frequency }}次</span>
            </template>
          </el-table-column>
          <el-table-column prop="assetDate" label="操作" width="220px">
            <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
              <p class="batclick">
                <el-button @click="batcWorklick(scope.row)">点击查看详情</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row v-if="percentList.length > 0">
      <div class="base-zh-title">农资投入统计</div>
      <div class="base-zh-box">
        <div class="zh-box-circle">
          <div
            v-for="(percentitem, percentindex) in percentList"
            :key="percentindex"
            class="box-circle-item"
            @click="batcAgrlick(percentitem.name)"
          >
            <div class="circle-line" :style="{ 'border-color': percentitem.color }"></div>
            <div
              class="circle-item-line"
              :style="{
                color: percentitem.color,
                fontSize: percentitem.fontSize + 1 + 'px'
              }"
            >{{ percentitem.name }}</div>
            <div
              class="circle-item-linetwo"
              :style="{
                color: percentitem.color,
                fontSize: percentitem.fontSize + 'px'
              }"
            >{{ percentitem.value }}{{ percentitem.unit }}</div>
          </div>
        </div>
      </div>
    </el-row>
    <!-- <el-row>
      <div class="base-zh-box zh-table">
        <div class="zh-box-table agri">
          <el-table
            ref="tableData"
            v-loading="loading"
            highlight-current-row
            :data="yaofeiTableList"
            stripe
            border
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="agriculturalMaterialName" label="农资名称" />
            <el-table-column prop="assetQuantity" label="投入量">
              <template
                v-if="scope.row.agriculturalMaterialName"
                slot-scope="scope"
              >
                <span v-if="scope.row.assetQuantity">
                  {{ scope.row.assetQuantity }}</span>
                <span v-if="scope.row.assetQuantity">
                  {{ scope.row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ratedQuantity" label="标准用量">
              <template
                v-if="scope.row.agriculturalMaterialName"
                slot-scope="scope"
              >
                <span v-if="scope.row.ratedQuantity">
                  {{ scope.row.ratedQuantity }}</span>
                <span v-if="!scope.row.ratedQuantity">
                  ————</span>
                <span v-if="scope.row.ratedQuantityUnitName&&scope.row.perQuantityUnitName">
                  {{ scope.row.ratedQuantityUnitName }}/{{ scope.row.perQuantityUnitName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="average" label="亩均用量">
              <template
                v-if="scope.row.agriculturalMaterialName"
                slot-scope="scope"
              >
                <span v-if="scope.row.average">
                  {{ scope.row.average }}</span>
                <span v-if="scope.row.unit&&scope.row.areaUnit">
                  {{ scope.row.unit }}/{{ scope.row.areaUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="assetDate" label="投入日期" />
          </el-table>
          <div v-if="totalSize > 10" class="agri-page">
            <Pagination
              :page-size="pageSize"
              :current-page="agriculpage"
              :total-size="totalSize"
              @changePageSize="changePageSize"
              @changeCurrentPage="changeCurrentPage"
            />
          </div>
        </div>
      </div>
    </el-row>-->
    <!-- 病虫害溯源 -->
    <el-row>
      <div class="base-zh-title">病害统计</div>
      <div class="base-zh-box">
        <div class="zh-box-table">
          <zhecharts
            v-if="pestlocaldata.seriesData"
            :cdata="pestlocaldata"
            :interval="0"
            :rotate="40"
            :isshowleg="true"
            :nowheight="'300px'"
            :nowwidth="'90%'"
          />
          <img
            v-else
            style="width: 90%; height: 300px;"
            src="@/assets/default/Defaultpolyline.png"
            alt
          />
          <!-- <h1 style="width: 100%">暂无数据</h1> -->
        </div>
      </div>
    </el-row>
    <el-row
      v-if="farmingTypeNo !== 'sc' && farmingTypeNo !== 'gc'"
      style="border-top:none;padding-top: 0px;"
    >
      <div class="base-zh-title">虫害统计</div>
      <div class="base-zh-box">
        <div class="zh-box-suyuan">
          <!-- <zhrowblank /> -->
          <zhrowblank :rowtitle="'发生虫害总次数'" :rowblank-list="rowblankList" />
        </div>
        <div class="zh-box-table">
          <zhecharts
            v-if="pestlodata.seriesData"
            :cdata="pestlodata"
            :interval="0"
            :rotate="40"
            :isshowleg="true"
            :nowheight="'300px'"
            :nowwidth="'90%'"
          />
          <img
            v-else
            style="width: 90%; height: 300px;"
            src="@/assets/default/Defaultpolyline.png"
            alt
          />
        </div>
      </div>
    </el-row>
    <!-- 通用弹出框 -->
    <el-dialog title="农资投入详情" :visible.sync="dialogAgrlFormVisible">
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="percentTable"
        stripe
        border
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="agriculturalMaterialName" label="农资名称" />
        <el-table-column prop="assetQuantity" label="投入量">
          <template v-if="scope.row.agriculturalMaterialName" slot-scope="scope">
            <span v-if="scope.row.assetQuantity">{{ scope.row.assetQuantity }}</span>
            <span v-if="scope.row.assetQuantity">{{ scope.row.symbol }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ratedQuantity" label="标准用量">
          <template v-if="scope.row.agriculturalMaterialName" slot-scope="scope">
            <span v-if="scope.row.ratedQuantity">{{ scope.row.ratedQuantity }}</span>
            <span v-if="!scope.row.ratedQuantity">————</span>
            <span
              v-if="
                scope.row.ratedQuantityUnitName && scope.row.perQuantityUnitName
              "
            >{{ scope.row.ratedQuantityUnitName }}/{{ scope.row.perQuantityUnitName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="average" label="亩均用量">
          <template v-if="scope.row.agriculturalMaterialName" slot-scope="scope">
            <span v-if="scope.row.average">{{ scope.row.average }}</span>
            <span
              v-if="scope.row.symbol && scope.row.areaUnit"
            >{{ scope.row.symbol }}/{{ scope.row.areaUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="assetDate" label="投入日期" />
      </el-table>
    </el-dialog>
    <!-- 通用弹出框 -->
    <el-dialog title="农事作业情况" :visible.sync="dialogWorkFormVisible">
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="WorkTable"
        stripe
        border
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="agriculturalWorkTypeName" label="农事作业名称" />
        <el-table-column prop="operator" label="作业人员">
          <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
            <span v-if="scope.row.operator">{{ scope.row.operator }}</span>
            <span v-if="!scope.row.operator">————</span>
          </template>
        </el-table-column>
        <el-table-column prop="agriculturalMaterialName" label="投入农资">
          <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
            <span v-if="scope.row.agriculturalMaterialName">{{ scope.row.agriculturalMaterialName }}</span>
            <span v-if="!scope.row.agriculturalMaterialName">————</span>
          </template>
        </el-table-column>
        <el-table-column prop="investmentVolume" label="投入量">
          <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
            <span v-if="scope.row.investmentVolume">{{ scope.row.investmentVolume }}</span>
            <span v-if="!scope.row.investmentVolume">————</span>
            <span v-if="scope.row.unitName && scope.row.investmentVolume">{{ scope.row.unitName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workArea" label="作业面积">
          <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
            <span v-if="scope.row.workArea">{{ scope.row.workArea }}</span>
            <span v-if="!scope.row.workArea">————</span>
            <span v-if="scope.row.areaUnit && scope.row.workArea">{{ scope.row.areaUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="numberInputs" label="亩均用量">
          <template v-if="scope.row.agriculturalWorkTypeName" slot-scope="scope">
            <span v-if="scope.row.average">{{ scope.row.average.toFixed(2) }}</span>
            <span v-if="!scope.row.average">————</span>
            <span
              v-if="
                scope.row.unitName && scope.row.areaUnit && scope.row.average
              "
            >{{ scope.row.unitName }}/{{ scope.row.areaUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="execEndTime" label="作业日期" />
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
// import axios from "axios";
import zhecharts from "@/components/Echarts/components/linechart/charts.vue";
// import Pagination from "@/components/Pagination";
import zhrowblank from "@/components/zh-row-blank/zh-row-blank.vue";
// import { getToken } from "@/utils/auth";
import classiApi from "@/api/trace-source-web/production-api/Information-classification-and-traceability.js";
import graApi from "@/api/trace-source-web/production-api/index-primary.js";
export default {
  components: { zhecharts, zhrowblank },
  props: {
    batId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      growthdatalist: [],
      farmworklist: [],
      pestlocaldata: {},
      pestlodata: {},
      percentList: [],
      yaofeiTableList: [],
      localdata: {},
      // everchartdatalist
      everchartdatalist: {},
      selectgrowthdataindex: 0,
      alleverdatalist: [],
      // 农事作业分类
      agriculpage: 1,
      pageSize: 10,
      totalSize: 0,
      rowblankList: [],
      dialogAgrlFormVisible: false,
      dialogWorkFormVisible: false,
      percentTable: [],
      WorkTable: [],
      frequencynum: 0
    };
  },
  created() {
    this.farmingTypeNo = sessionStorage.farmingTypeNo;
  },
  mounted() {
    this.batchNo = this.batId;
    // this.batchNo = this.batId;
    // console.log(this.batchNo)
    this.databaseName = sessionStorage.databaseName;
    setTimeout(() => {
      this.getgrowthdatachart();
      this.getfarmworkyuan();
      this.getagrisourcedata();
      // this.getagrisourcetable();
      this.getpestlinebar();
      this.getpestdata();
    }, 200);
  },
  methods: {
    // 获取生长环境数据ucharts图
    getgrowthdatachart() {
      let nowbatchNo = this.batchNo;
      classiApi.growthRecord(nowbatchNo).then(res => {
        let list = res.data;
        if (list) {
          let newlist = {
            categories: [],
            series: []
          };
          let topnewlist = []; // 生长图表和最近的数据
          if (list.typeNameList && list.dateList && list.collectDataItemMap) {
            newlist.categories = list.dateList;
            this.alleverdatalist = list;
            let listone = list.typeNameList;
            let maxind = list.dateList.length - 1;
            if (listone[0]) {
              listone.forEach((itemone, indexone) => {
                let arrone = list.collectDataItemMap[itemone] || [];
                let jkpushobj = {
                  value: arrone[maxind] || arrone[maxind - 1] || "-",
                  unit: "",
                  name: itemone,
                  url: ""
                };
                if (itemone === "空气温度") {
                  // jkpushobj.url = require('../../static/envirmentimg/kongqiwendu.png')
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/kongqiwendu.png");
                  jkpushobj.unit = "℃";
                } else if (itemone === "空气湿度") {
                  jkpushobj.unit = "%";
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/shidu.png");
                  // jkpushobj.url = require('../../static/envirmentimg/shidu.png')
                } else if (itemone === "光照度") {
                  // jkpushobj.url = require('../../static/envirmentimg/guangzhaodu.png')
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/guangzhaodu.png");
                  jkpushobj.unit = "Lux";
                } else if (itemone === "土壤温度") {
                  jkpushobj.unit = "℃";
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/turangwengdu.png");
                  // jkpushobj.url = require('../../static/envirmentimg/turangwengdu.png')
                } else if (itemone === "土壤湿度") {
                  jkpushobj.unit = "%";
                  // jkpushobj.url = require('../../static/envirmentimg/turangshidu.png')
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/turangshidu.png");
                } else if (itemone === "酸碱度") {
                  jkpushobj.unit = "";
                  jkpushobj.url = require("@/assets/trace-source-manage/envirmentimg/ph.png");
                  // jkpushobj.url = require('../../static/envirmentimg/ph.png')
                } else {
                  console.log("空字符串出现");
                }
                topnewlist.push(jkpushobj);
                // console.log(topnewlist)
                if (itemone.length - 1 === indexone) {
                  this.growthdatalist = topnewlist;
                }
              });
              this.selectenvtype();
            }
          }
        }
      });
    },
    selectenvtype(i = 0) {
      this.selectgrowthdataindex = i;
      let list = this.alleverdatalist;
      let newlist = {
        xAxisdata: [],
        xData: [],
        seriesData: []
      };
      if (list.typeNameList && list.dateList && list.collectDataItemMap) {
        newlist.categories = list.dateList;
        this.alleverdatalist = list;
        let listone = list.typeNameList;
        let listtwo = list.collectDataItemMap;
        let nowunit = "";
        switch (listone[i]) {
          case "空气温度":
            nowunit = "℃";
            break;
          case "空气湿度":
            nowunit = "%";
            break;
          case "光照度":
            nowunit = "Lux";
            break;
          case "土壤温度":
            nowunit = "℃";
            break;
          case "土壤湿度":
            nowunit = "%";
            break;
          default:
            break;
        }
        // console.log(listtwo[listone[i]])
        newlist = {
          xAxisdata: newlist.categories,
          xData: [],
          seriesData: [
            { data: listtwo[listone[i]], name: listone[i], type: "line" }
          ],
          yAxisName: nowunit,
          unitName: nowunit
        };
        this.everchartdatalist = newlist;
        // console.log(newlist)
      }
    },
    // 农事作业追溯
    getfarmworkyuan() {
      let nowbatchNo = this.batchNo;
      graApi.farmingOperation({ batchNo: nowbatchNo }).then(res => {
        // console.log(res.data.data)
        let list = res.data;
        this.farmworklist = list;
        let frequency = [];
        frequency = this.farmworklist.map(item => item.frequency);
        this.frequencynum = 0;
        frequency.forEach(item => {
          this.frequencynum += item;
        });
      });
    },
    // 农资统计-药肥统计
    getagrisourcedata() {
      // let nowbatchNo = this.batchNo
      let nowbatchNo = this.batchNo;
      graApi.agriculturalInputsTime({ batchNo: nowbatchNo }).then(res => {
        let list = res.data;
        let newlist = [];
        let colorlist = ["#82e5ff", "#ff5500", "#55ff00"];
        let listLength = list.length;
        let listWidth = 200;
        if (listLength > 0 && listLength <= 5) {
          listWidth = 200;
        }
        if (listLength > 5 && listLength <= 10) {
          listWidth = 160;
        }
        if (listLength > 10) {
          listWidth = 150;
        }
        // console.log(listWidth, listLength);
        list.forEach((item, index) => {
          let forarray = {
            name: item.agriculturalMaterialName || "",
            value: item.totalDosage.toFixed("1"),
            color: colorlist[0],
            unit: item.symbol || "%",
            zpercent: 100,
            width: listWidth,
            fontSize: listWidth / 10
          };
          newlist.push(forarray);
        });
        this.percentList = newlist;
      });
    },
    // 农资投入总数
    batcAgrlick(e) {
      this.loading = true;
      let params = {
        batchNo: this.batchNo,
        agriculturalMaterialName: e
      };
      graApi.agriculturalInputs(params).then(res => {
        let list = res.data;
        // console.log(list)
        this.percentTable = list;
        this.loading = false;
        this.dialogAgrlFormVisible = true;
      });
    },
    // 农事详情
    batcWorklick(e) {
      this.loading = true;
      let params = {
        batchNo: this.batchNo,
        agriculturalWorkTypeName: e.agriculturalWorkTypeName,
        agriculturalMaterialName: e.agriculturalMaterialName
      };
      graApi.farmingminOperation(params).then(res => {
        let list = res.data;
        // console.log(list)
        this.WorkTable = list;
        this.loading = false;
        this.dialogWorkFormVisible = true;
      });
    },
    // // 农资统计-表格数据
    // getagrisourcetable() {
    //   let nowbatchNo = this.batchNo;
    //   classiApi.agriculturalInputsList({
    //     entity: {
    //       batchNo: nowbatchNo
    //     },
    //     page: this.agriculpage,
    //     size: this.pageSize
    //   }).then(res => {
    //     // console.log(res.data.data)
    //     let list = res.data.content;
    //     this.totalSize = res.data.totalElements;
    //     let newlist = [];
    //     if (list) {
    //       list.forEach((item, index) => {
    //         if (item) {
    //           let pushobj = {
    //             agriculturalMaterialName: item.agriculturalMaterialName, // 农资名称
    //             unit: item.symbol, // 投入量单位
    //             assetQuantity: item.assetQuantity, // 投入量
    //             assetDate: item.assetDate, // 投入日期
    //             ratedQuantity: item.ratedQuantity, // 标准用量
    //             ratedQuantityUnitName: item.ratedQuantityUnitName, // 标准用量单位 ratedQuantityUnitName/perQuantityUnitName
    //             perQuantityUnitName: item.perQuantityUnitName,
    //             average: item.average, // 亩均用量
    //             areaUnit: item.areaUnit // 亩均用量单位 symbol/areaUnit

    //           };
    //           if (item.assetDate) {
    //             pushobj.assetDate = this.dateToFormatname(item.assetDate);
    //           }
    //           newlist.push(pushobj);
    //         }
    //       });
    //     }
    //     this.yaofeiTableList = newlist;
    //     this.loading = false;
    //   })
    // },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getagrisourcetable();
    },
    changeCurrentPage(currentPage) {
      this.agriculpage = currentPage;
      this.getagrisourcetable();
    },
    // 病虫害发生次数uchart
    async getpestlinebar() {
      let nowbatchNo = this.batchNo;
      classiApi.feignInfo(nowbatchNo).then(res => {
        let list = res.data;
        if (list) {
          list.forEach((itemone, index) => {
            if (itemone) {
              let pushobj = {
                name: itemone.insectName,
                value: itemone.num || itemone.insectNum, // 必须为数字
                unit: "只",
                allnum: 50, // 总数
                prence: "",
                color: ""
              };
              this.rowblankList.push(pushobj);
            }
          });
        }
      });
    },
    // 病虫害发生次数uchart
    getpestdata() {
      let nowbatchNo = this.batchNo;
      classiApi.insectAlarm(nowbatchNo).then(res => {
        let setechartsdata = {
          xAxisdata: [],
          xData: ["病害发生次数"],
          seriesData: []
        };
        let sechartsdata = {
          xAxisdata: [],
          xData: ["虫害发生次数"],
          seriesData: []
        };
        let list = res.data;
        let zzsercone = {
          name: "虫害发生次数",
          type: "bar",
          data: list[2]["虫害"]
        };
        let zzserctwo = {
          name: "病害发生次数",
          type: "bar",
          data: list[2]["病害"],
          color: "#5B8FF9"
        };
        // console.log(list)
        setechartsdata.xAxisdata = list[0];
        setechartsdata.yAxis = 1;
        // setechartsdata.seriesData.push(zzsercone);
        setechartsdata.seriesData.push(zzserctwo);
        setechartsdata.unitName = "次";
        setechartsdata.yAxisName =
          "                            " + "病害发生次数(次)";

        sechartsdata.xAxisdata = list[0];
        sechartsdata.yAxis = 1;
        sechartsdata.seriesData.push(zzsercone);
        sechartsdata.unitName = "次";
        sechartsdata.yAxisName =
          "                            " + "虫害发生次数(次)";
        this.pestlocaldata = setechartsdata;
        this.pestlodata = sechartsdata;
        // console.log(setechartsdata);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#growing {
  margin-bottom: 0;
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-card__body {
    padding: 0;
    .el-row {
      padding: 0px;
      position: relative;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px dashed rgba(166, 166, 166, 1);
      .base-zh-title {
        width: 100%;
        // font-weight: 600;
        height: 45px;
        line-height: 45px;
        margin-left: 20px;
        font-size: 22px;
      }
      .base-zh-frequency {
        position: absolute;
        right: 10px;
        top: 10px;
        color: rgba(130, 229, 255, 1);
        font-size: 18px;
      }
      .base-zh-box {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-bottom: 10px;
        min-height: 100px;
        // max-height: 400px;
        box-sizing: border-box;
        // padding-top: 50px;
        background-color: rgba($color: #0e4352, $alpha: 1);
        overflow-y: auto;
        .zh-box-line {
          width: calc(100% - 40px);
          margin-left: 20px;
          padding-bottom: 120px;
          // height: 40px;

          // background-color: rgba(22, 101, 124, 1);
          line-height: 40px;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          flex-direction: row;
          position: relative;
          .box-line-one {
            margin-right: 20px;
          }
          .box-line-icon {
            width: 72px;
            height: 72px;
            background-color: rgba(113, 205, 230, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 3%;
            img {
              width: 40%;
              height: 40%;
              border: none;
              border-radius: 0;
            }
          }
          .box-line-dotted {
            position: absolute;
            height: 95%;
            border-left: 2px dashed rgba(113, 205, 230, 1);
            top: 35%;
            left: calc(3% + 36px);
          }
          .box-line-two {
            width: 25%;
            font-size: 30px;
            margin-left: 15px;
            margin-top: 15px;
            color: rgba(113, 205, 230, 1);
          }
          .box-line-main {
            position: absolute;
            right: 5%;
            width: 70%;
            border: 1px solid rgba(229, 229, 229, 0.5);
            border-radius: 5px;
            box-sizing: border-box;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            height: 150px;
            .line-name {
              width: 45%;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              font-size: 20px;
              margin-left: 2%;
              position: relative;
              text-align: start;
              span {
                position: absolute;
                left: 30%;
                display: inline-block;
                width: 60%;
                height: 35px;
                line-height: 35px;
                border: 1px solid rgba(229, 229, 229, 0.5);
                box-sizing: border-box;
                padding: 0 10px;
                margin-left: 15px;
                border-radius: 5px;
              }
            }
          }
        }
        .zh-box-circle {
          width: calc(100% - 40px);
          padding: 20px 20px;
          min-height: 250px;
          background-color: rgba($color: #0e4352, $alpha: 1);
          overflow-x: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          flex-direction: row;
          .box-circle-item {
            margin: 0 30px 30px;
            cursor: pointer;
            // margin-top: 35px;
            // height: 150px;
            // background-color: aqua;
            // display: flex;
            // justify-content: center;
            // flex-direction: column;
            // align-items: center;
            height: 160px;
            width: 160px;
            position: relative;
            &:hover {
              .circle-line {
                border-color: #55ff00 !important;
                box-shadow: 0px 0px 10px #000;
              }
              .circle-item-line {
                color: #55ff00 !important;
              }
              .circle-item-linetwo {
                color: #55ff00 !important;
              }
              .circle-item-lineone {
                color: #55ff00 !important;
              }
            }
            .circle-line {
              height: 160px;
              width: 160px;
              box-sizing: border-box;
              border-style: solid;
              border-radius: 50%;
              border-width: 5px;
            }
            .circle-item-line {
              position: absolute;
              left: 50%;
              top: 35%;
              transform: translate(-50%, -40%);
              // bottom: 90px;
              word-wrap: break-word;
              width: 120px;
              height: 30px;
              line-height: 20px;
              font-size: 22px;
              text-align: center;
            }
            .circle-item-lineone {
              position: absolute;
              // position: relative;
              left: 50%;
              // top: 30%;
              transform: translate(-50%, 12%);
              // bottom: -3px;
              // word-wrap: break-word;
              white-space: nowrap;
              width: 100%;
              overflow: hidden;

              height: 30px;
              text-overflow: ellipsis;
              line-height: 20px;
              text-align: center;
            }
            .circle-item-linetwo {
              position: absolute;
              left: 50%;
              top: 65%;
              transform: translate(-50%, -60%);
              bottom: 100px;
              text-align: center;
              width: 100%;
              height: 30px;
              line-height: 30px;
            }
          }
        }
        .zh-box-table {
          // height: 300px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
          position: relative;
          flex-wrap: wrap;
        }
        .agri {
          display: block;
          .agri-page {
            position: relative;
            // width: 100%;
            height: 40px;
            .pagination {
              position: absolute;
              right: 0px;
              bottom: 2px !important;
              .el-pager,
              .el-pager li {
                display: inline-block !important;
              }
            }
          }
        }
        .zh-box-suyuan {
          widows: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          margin-top: 20px;
          flex-direction: column;
        }
      }
      .zh-table-box {
        max-height: 100%;
        padding-top: 50px;
        max-height: 620px;
      }
      .zh-table {
        max-height: 100%;
      }
      .zhimgl {
        margin: 0 auto;
        width: 100%;
        // width: 300px;
        height: 700px;
        border-radius: 0%;
        box-sizing: content-box;
        border: 8px solid rgba($color: #184e5f, $alpha: 1);
      }
      p {
        margin-left: 20px;
      }
      .el-col {
        height: 400px;
        position: relative;
        .left-right {
          border: none;
          border-right: 1px solid rgba($color: #64b9d1, $alpha: 0.9);
        }
        .left-top {
          // border-right: 1px solid rgba($color: #64b9d1, $alpha: 0.9);
          height: 100%;
          ul {
            width: 100%;
            padding: 0;
            margin: 0;
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            overflow-y: auto;
            li {
              width: 45%;
              background-color: #0f4656;
              list-style-type: none;
              margin-bottom: 10px;
              height: 49%;
              line-height: 25px;
              // width: 90px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-evenly;
              i {
                font-size: 34px;
              }
              > div {
                margin: 0 auto;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                box-sizing: content-box;
                // border: 8px solid rgba($color: #184e5f, $alpha: 1);
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .left-top-name {
                color: #ffffff80;
              }
              span {
                // color: #ffffff10;
                font-weight: 600;
                b {
                  font-size: 24px;
                }
              }
              // img {
              // }
              img {
                width: auto;
                height: auto;
                // height: 50px;
                transform: scale(1);
              }
            }
          }
        }
      }
      .right {
        height: 360px;
        padding-right: 10px;
        margin-top: 22px;
        .zh-right-echart {
          height: 98%;
          padding: 20px 15px;
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: center;
          flex-wrap: nowrap;
          justify-content: center;
          background-color: #0f4656;
          // height: 300px;zh-scroll-view
          .zh-scroll-view {
            width: 100%;
            display: flex;
            height: 80px;
          }
          .box2-2 {
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #fffff0;
            text-align: center;
          }
          .box2-2-select {
            background: #fffff0;
            .scroll-line {
              color: rgba(15, 70, 86, 1);
            }
          }
        }
      }
    }
    .el-row:first-child {
      border: none;
    }
  }
}
::v-deep .el-progress__text {
  white-space: pre;
}

.batclick {
  // padding-left: 10px;
  margin: 0;
  margin-left: 0 !important;
  width: 100%;
  .el-button {
    width: 100%;
    border-radius: 15px;
    height: 30px;
    line-height: 9px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
  }
}
</style>
